<template>
  <!--    <ps-tree-select></ps-tree-select>-->
  <!--  -->
  <!--  <treeselect-->
  <!--    :load-options="loadOptions"-->
  <!--    :options="options"-->
  <!--    :auto-load-root-options="true"-->
  <!--    :multiple="false"-->
  <!--    placeholder="Open the menu..."-->
  <!--  />-->
  <!--  临时版本, 这个组件是写死的, 目前下拉树只能获取机构数据 -->
  <treeselect :options="options"
              :load-options="loadOptions"
              placeholder="请选择..."
              v-model="value"
              @select="onTreeClick"
              @deselect="deselect"
              @open="open"
              @close="close"
              noChildrenText="正在加载中..."
              noOptionsText="正在加载中..."
              @input="input">
  </treeselect>
</template>

<script>
import PsTreeSelect from "@/components/psTree/PsTreeSelect";
import {getRealUrl} from "@/utils/httpRequet";
import treeselect from '@riophae/vue-treeselect'
import request from "@/utils/requestutil";
import _ from "lodash";
import {LOAD_ROOT_OPTIONS, LOAD_CHILDREN_OPTIONS} from "@riophae/vue-treeselect/src/constants"

export default {
  name: "mecSelectTree",
  components: {
    PsTreeSelect, treeselect
  },
  data: () => ({
    value: null,
    options: [],
    treeConfig: {},
    // 树配置地址
    treeConfigUrl: getRealUrl('treeConfigUrl', true),
    // 树标识
    treeConfigKey: 'GROUP_CATEGORY_RS_UNMK',
    // 树数据地址
    dataUrl: getRealUrl('defaultTreeDataUrl', true),
  }),
  mounted() {
    this.loadTreeInit()
  },
  methods: {
    loadTreeData(parentNode, callback) {
      const that = this
      // 如果树配置为空
      if (_.isEmpty(that.treeConfig.queryTemplet)) {
        // 获取配置
        callback(new Error("无法获取树结构配置"))
      } else {

      }
    },
    loadTreeInit() {
      let that = this
      // 初始化机构树
      request({
        url: that.treeConfigUrl,
        data: {flag: that.treeConfigKey},
        method: 'post'
      }).then(response => {
        console.log(response)
        if (response.result === "SUCCESS") {
          // 保存配置
          that.treeConfig = response.category
          // 获取数据
          request({
            url: this.dataUrl,
            method: 'post',
            data: {pid: "", templet: response.category.queryTemplet, level: 'SUB'}
          }).then(res => {
            console.log(res)
            let resData = res.data;
            let arr = []
            resData.forEach(item => {
              let objData = {};
              objData.id = item.id
              objData.label = item.name
              objData.children = null
              if (item.isParent === false) {
                delete objData.children
              }
              arr.push(objData)
            })
            that.options = arr
          }).catch(error => {
            console.log(error.message)
            callback(new Error("请求数据失败"))
          })
        }
      }).catch(error => {
        console.log(error.message)
        callback(new Error("请求数据失败"))
      })
    },

    async loadOptions({action, parentNode, callback}) {
      const that = this
      if (action === LOAD_CHILDREN_OPTIONS) {
        request({
          url: that.dataUrl,
          method: 'post',
          // 'ALL' 查询整颗树, 'SUB'查询下级, 用于异步
          data: {pid: parentNode.id, templet: that.treeConfig.queryTemplet, level: 'SUB'}
        }).then(data => {
          let resData = data.data;
          let arr = [];
          // 排序
          resData.sort((vala, valb) => {
            return vala.uorder - valb.uorder
          })
          console.log(resData)
          resData.forEach(item => {
            let objData = {};
            objData.id = item.id
            objData.label = item.name
            objData.children = null
            if (item.isParent === false) {
              delete objData.children
            }
            arr.push(objData)
          })
          parentNode.children = arr;
          console.log(parentNode)
        })
      }
    },
    onTreeClick(node, instanceId) {
      this.$emit("onTreeClick", ...arguments)
    },
    deselect(node, instanceId) {
      this.$emit("deselect", ...arguments)
    },
    open(instanceId) {
      this.$emit("open", ...arguments)
    },
    close(value, instanceId) {
      this.$emit("close", ...arguments)
    },
    input(value, instanceId) {
      this.$emit("input", ...arguments)
    }
  }
}
</script>

<style scoped>

</style>
